<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>plain</title>
    <link rel="stylesheet" href="../../model/element.css">
    <link rel="stylesheet" href="../../model/jsFn.css">
</head>
<body>
<!--目录-->
<div class="catalog">
    <h2>目录</h2>
    <ul>
        <li>
            <p><a href="#element">< plain ></a></p>
        </li>
        <li>
            <p><a href="#attribute">属性</a></p>
            <ul>
                <li><p><a href="#example">实例</a></p></li>
                <li><p><a href="#optional">可选属性</a></p></li>
                <li><p><a href="#note">提示和注释</a></p></li>
                <li><p><a href="#sketch">效果图</a></p></li>
            </ul>
        </li>
        <li>
            <p><a href="#jsFn">js函数</a></p>
            <ul>
                <li><p><a href="#jsFn_append">append</a></p></li>
                <li><p><a href="#jsFn_to">to</a></p></li>
                <li><p><a href="#jsFn_stop">stop</a></p></li>
                <li><p><a href="#jsFn_adapter">adapter</a></p></li>

            </ul>
        </li>
        <li>
            <p><a href="#childElement">子标签</a></p>
            <ul>
                <li><p><a href="#childElement_header">header</a></p></li>
                <li><p><a href="#childElement_body">body</a></p></li>
                <li><p><a href="#childElement_footer">footer</a></p></li>
                <li><p><a href="#childElement_footer">float</a></p></li>
            </ul>
        </li>
    </ul>
</div>
<!--标签-->
<div id="element">
    <h2>plain</h2>
    <div>简介:</div>
    <p>xml根标签,表示最平常的布局</p>
</div>
<!--属性-->
<div id="attribute">
    <h2>属性</h2>
    <div style="margin-left: 25px" id="example">
        <h3>实例:</h3>
        <xmp>
            <plain>
                <header><text><cp>书籍详情页</cp></text></header>
                <body><text><lp>内容</lp></text></body>
            </plain>
        </xmp>
    </div>
    <div id="optional">
        <h3>可选属性:</h3>
        <table >
            <tbody>
                <tr>
                    <th>属性</th>
                    <th>值</th>
                    <th>描述</th>
                </tr>
                <tr>
                    <td>font</td>
                    <td>boolean,color,int</td>
                    <td>boolean:是否加粗,color:字体颜色,int:字体大小,可同时存在,顺序不定</td>
                </tr>
                <tr>
                    <td>background</td>
                    <td>color|string</td>
                    <td>color:背景色;string:图片路径</td>
                </tr>
                <tr>
                    <td>clip</td>
                    <td>color,int</td>
                    <td>color:状态栏的颜色,int:状态栏的字体,可选值有0:浅色,1:深色;只对android6.0版本以上手机有用</td>
                </tr>
            </tbody>
        </table>
    </div>
    <div id="note">
        <h3>提示和注释:</h3>
        <p>clip属性和input输入框有冲突,最好不要同时使用</p>
    </div>
    <div id="sketch">
        <h3>效果图:</h3>
        <img src="../img/plain.png" alt="">
    </div>
</div>
<!--js方法-->
<div id="jsFn">
    <h2>js方法</h2>
    <div class="jsFnModel" id="jsFn_append">
        <h3>append:</h3>
        <div class="shape">
            <h3>函数使用样式</h3>
            <p>document.append(xml,[options]) -> null</p>
        </div>
        <div class="profile">
            <h3>函数功能简介</h3>
            <p>向plain里的几个子标签里增加一个控件</p>
        </div>
        <div class="version">
            <p>稳定性;2 - 稳定的</p>
            <p>新增于:v0.0.0</p>
        </div>
        <div class="params">
            <h3>参数列表:</h3>
            <ul>
                <li>
                    <p>xml</p>
                    <p>&nbsp;string|view&nbsp;</p>
                    <p>string:字符串类型的xml;view:通过document.createElement(xml)方法生成的view</p>
                </li>
                <li>
                    <p>options</p>
                    <p>&nbsp;object&nbsp;</p>
                    <p>options.index:index为正数时,添加到正数第index个;index为负数是,添加到倒数第index个;默认index=0 <br/>
                        options.view:添加到哪个子标签里面,可选值有"header"|"body"|"footer"|"float";默认body
                    </p>
                </li>
            </ul>
        </div>
        <div class="res">
            <h3>返回值:</h3>
            <p>无</p>
        </div>
        <div class="code">
            <h3>例子</h3>
            <pre>
            <code>
                let s = "<text id=\"createTest\"><lp>这是测试</lp></text>";
                //方式1
                let textView = document.createElement(s);
                document.append(textView,{view:body,index:1});
                //方式2
                document.append(s,{view:body,index:-1});
            </code>
        </pre>
        </div>
        <div class="error">
            <h3>抛出错误</h3>
        </div>
    </div>
    <div class="jsFnModel" id="jsFn_to">
        <h3>to:</h3>
        <div class="shape">
            <h3>函数使用样式</h3>
            <p>document.to(index,[delay]) ->null</p>
        </div>
        <div class="profile">
            <h3>函数功能简介</h3>
            <p>body标签内的view有效,滑动到指定的item,可选择是否带动画效果</p>
        </div>
        <div class="version">
            <p>稳定性;2 - 稳定的</p>
            <p>新增于:v0.0.0</p>
        </div>
        <div class="params">
            <h3>参数列表:</h3>
            <ul>
                <li>
                    <p>index</p>
                    <p>&nbsp;int&nbsp;</p>
                    <p>int大于0为正数,int小于0位倒数;</p>
                </li>
                <li>
                    <p>delay</p>
                    <p>&nbsp;int&nbsp;</p>
                    <p>是否有动画效果;可选值:0:不带动画效果;1:带动画效果</p>
                </li>
            </ul>
        </div>
        <div class="res">
            <h3>返回值:</h3>
            <p>无</p>
        </div>
        <div class="code">
            <h3>例子</h3>
            <pre>
            <code>
                //滑到最后行
                document.to(-1);
                //可看到活动过程的滑到第5行
                document.to(5,1);
            </code>
        </pre>
        </div>
        <div class="error">
            <h3>抛出错误</h3>
        </div>
    </div>
    <div class="jsFnModel" id="jsFn_stop">
        <h3>to:</h3>
        <div class="shape">
            <h3>函数使用样式</h3>
            <p>document.stop() ->null</p>
        </div>
        <div class="profile">
            <h3>函数功能简介</h3>
            <p>停止刷新动画</p>
        </div>
        <div class="version">
            <p>稳定性;2 - 稳定的</p>
            <p>新增于:v0.0.0</p>
        </div>
        <div class="params">
            <h3>参数列表:</h3>
            <p>无</p>
        </div>
        <div class="res">
            <h3>返回值:</h3>
            <p>无</p>
        </div>
        <div class="code">
            <h3>例子</h3>
            <pre>
            <code>
                document.stop();
            </code>
        </pre>
        </div>
        <div class="error">
            <h3>抛出错误</h3>
        </div>
    </div>
    <div class="jsFnModel" id="jsFn_adapter">
        <h3>adapter:</h3>
        <div class="shape">
            <h3>函数使用样式</h3>
            <p>document.adapter(id) ->adapter</p>
        </div>
        <div class="profile">
            <h3>函数功能简介</h3>
            <p>根据id,返回当前上下文的一个适配器</p>
        </div>
        <div class="version">
            <p>稳定性;2 - 稳定的</p>
            <p>新增于:v0.0.1</p>
        </div>
        <div class="params">
            <h3>参数列表:</h3>
            <ul>
                <li>
                    <p>id</p>
                    <p>&nbsp;string&nbsp;</p>
                    <p>item标签里的id属性</p>
                </li>
            </ul>
        </div>
        <div class="res">
            <h3>返回值:</h3>
            <p>adapter</p>
            <p>返回一个适配器对象,参考 <a href="../item/index.html"></a></p>
        </div>
        <div class="code">
            <h3>例子</h3>
            <pre>
            <xmp>
                <item id="bookList">
                    <book></book>
                </item>
                document.adapter('bookList').refresh([]);
            </xmp>
        </pre>
        </div>
        <div class="error">
            <h3>抛出错误</h3>
        </div>
    </div>
</div>
<!--子标签-->
<div id="childElement">
    <h2>子标签</h2>
    <div id="childElement_header">
        <h3>header</h3>
        <p>参见 <a href="../header.html">< header ></a> </p>
    </div>
    <div id="childElement_body">
        <h3>body</h3>
        <p>参见 <a href="../body.html">< body ></a> </p>
    </div>
    <div id="childElement_footer">
        <h3>footer</h3>
        <p>参见 <a href="../footer.html">< footer ></a></p>
    </div>
    <div id="childElement_float">
        <h3>float</h3>
        <p>参见 <a href="../float.html">< footer ></a></p>
    </div>
</div>
<div class="author">
    <p>by-草草</p>
</div>
</body>
</html>